/**
 * 项目中的一些数据通过vue加载(如form表单).
 * 但是vue会重新渲染dom,导致绑定的事件等失效.
 * 故提前做vue的一些渲染工作. 
 * 理应在通过vue加载数据的页面,首先渲染数据,然后再绑定事件:
 * 1.priority  越小  越先执行,故本js中的优先级定义为很小的数值
 *   多个$(function(){});是顺序执行的
 * 2. 绑定dom事件可以放在vue的mounted之中
 * 3. 其他地方绑定事件,尽量使用绑定未来事件的方式
 */
;
(function($, $nojs) {
	if (!$ || !$nojs) {
		try {
			console.warn("jQuery or $nojs is not define ");
		} catch (e) {
			console.warn("what happend ");
		}
	}
	/**
	 * 001 根据id同步填充form表单:
	 * 1. 选择器: form[role*='vue-form']
	 * 2. 加载的url来自form的data-form-ur="", id来自当前href
	 * 3. 加载完毕后执行的函数来自 data-after="f1,f2"
	 */
	$nojs.loadVueForm = {
		enable: function() {
			return !!Vue;
		},
		priority: 1,//在nojs中的执行顺序 越小越先执行
		selector: "form[role*='vue-form']",
		init: function(context) {
			var module = this;
			$(module.selector, context).each(function() {
				var $form = $(this);
				var url = $form.data("formUrl");
				var id = $form.data("id") || common.getUrlParam("id");
				if (!url || !id) return;
				$request.get(url, {
					async: false,
					data: {
						id: id
					}
				}, function(result) {
					var formVm = new Vue({
						el: $form.get(0),
						data: result.data,
						mounted: function() {
							//vue 加载完数据之后执行的函数
							var afterFn = $form.data("after");
							if(!afterFn) return;
							afterFn.split(",").forEach(function(fn){
								common.callFunction(fn, null);
							});
	
						}
					});
					$form.data("formvm", formVm);
				});
	
			});
		}
	};


})(jQuery, $nojs);
